<template>
    <div class="banner">
        <div class="clouds">
            <img src="@/assets/cloud4.png" style="--i:1;bottom:0.4vw" alt="">
            <img src="@/assets/cloud2.webp" style="--i:2;bottom:0.3vw" alt="">
            <img src="@/assets/cloud4.png" style="--i:3;bottom:0.1vw" alt="">
            <img src="@/assets/cloud2.webp" style="--i:4;bottom:0.1vw" alt="">
            <img src="@/assets/cloud4.png" style="--i:5;bottom:0.5vw" alt="">
            <img src="@/assets/cloud2.webp" style="--i:6;bottom:0.2vw;" alt="">
            <img src="@/assets/cloud4.png" style="--i:7;bottom:0.3vw" alt="">
            <img src="@/assets/cloud4.png" style="--i:8;bottom:0.1vw" alt="">
            <img src="@/assets/cloud2.webp" style="--i:9;top:1vw;" alt="">
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.banner {
    position: relative;
    width: 100%;
    height: 15vh;
    background-size: cover;
    background-position: bottom;
    overflow: hidden;
}

.banner .clouds {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.banner .clouds img {
    position: absolute;
    max-width: 10%;
    animation: animate calc(10s * var(--i)) linear infinite;
}

@keyframes animate {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100vw);
    }
}
</style>